<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import EchartsComponent from './EchartsComponent.vue'
import { httpBigScreenTop10 } from '@/api/bigScreen.js'

let refEchartsComponent = ref()
let option = ref({
    backgroundColor: ''
})

function _initEcharts(list1, list2) {

    /* 数据 */
    let nameList = list1 || ["广东", "湖南", "江西", "广西", "浙江", "福建", "湖北", "重庆", "云南", "河南"];// 教职工岗位
    let valueList = list2 || [100, 99, 98, 97, 96, 95, 94, 93, 92, 91];// 对应数值

    // 需要展示几条
    const showNum = 9;

    /* 函数 */
    // 获取当前数据
    let currentIndex = showNum; // 当前添加数据下标
    let currentValueList = valueList.slice(0, showNum); // 当前数值列表
    let currentNameList = nameList.slice(0, showNum); // 当前类型列表
    // 改变当前数据
    const getCurrentData = () => {
        // 添加数据
        currentValueList.push(valueList[currentIndex]);
        currentNameList.push(nameList[currentIndex]);
        // 重新切割
        currentValueList = currentValueList.slice(1, showNum + 1);
        currentNameList = currentNameList.slice(1, showNum + 1);
        // 判断当前下标是否超过最大值
        if (currentIndex < nameList.length - 1) {
            currentIndex++;
        } else {
            currentIndex = 0;
        }
    }
    // 调用设置默认
    //getCurrentData()


    option.value = {
        backgroundColor: '#090d1f',
        legend: {
            show: false,
        },
        grid: {
            left: "100",
            right: "64",
            bottom: "24",
            top: "24",
            containLabel: true,
        },
        xAxis: [
            {
                splitLine: {
                    show: false,
                },
                type: "value",
                show: false,
            },
        ],
        yAxis: [
            {
                splitLine: {
                    show: false,
                },
                axisLine: {//y轴
                    show: false,
                },
                type: "category",
                id: "yAxis1",
                axisTick: {
                    show: false,
                },
                inverse: true, // 倒序
                boundaryGap: false, // 留白政策
                data: currentNameList,
                axisLabel: {
                    color: "#fff",
                    align: 'left',
                    padding: [-10, 0, 0, -180],
                    verticalAlign: "top",
                    formatter: (value, index) => {
                        let i = nameList.indexOf(value);
                        if (i == 0) {
                            return [`{lg1|${i + 1}} ` + "{title|" + value + "} "].join("\n");
                        } else if (i == 1) {
                            return [`{lg2|${i + 1}} ` + "{title|" + value + "} "].join("\n");
                        } else if (i == 2) {
                            return [`{lg3|${i + 1}} ` + "{title|" + value + "} "].join("\n");
                        } else {
                            return [`{lg|${i + 1}} ` + "{title|" + value + "} "].join("\n");
                        }
                    },
                    rich: {
                        lg1: {
                            backgroundColor: "rgba(240, 106, 57, 0.1)",
                            color: 'rgba(240, 106, 57, 1)',
                            borderRadius: [5, 5, 0, 0],
                            padding: 5,
                            align: "center",
                            width: 32,
                            height: 32,
                            lineHeight: 32,
                            fontSize: 19,
                            fontFamily: 'Source Han Sans CN-Regular',
                        },
                        lg2: {
                            backgroundColor: "rgba(255, 176, 38, 0.1)",
                            color: 'rgba(255, 176, 38, 1)',
                            borderRadius: 5,
                            padding: 5,
                            align: "center",
                            width: 32,
                            height: 32,
                            lineHeight: 32,
                            fontSize: 19,
                            fontFamily: 'Source Han Sans CN-Regular',
                        },
                        lg3: {
                            backgroundColor: "rgba(51, 207, 201, 0.1)",
                            color: 'rgba(51, 207, 201, 1)',
                            borderRadius: 5,
                            padding: 5,
                            align: "center",
                            width: 32,
                            height: 32,
                            lineHeight: 32,
                            fontSize: 19,
                            fontFamily: 'Source Han Sans CN-Regular',
                        },
                        lg: {
                            backgroundColor: "rgba(57, 126, 240, 0.1)",
                            color: 'rgba(57, 126, 240, 1)',
                            borderRadius: 5,
                            padding: 5,
                            align: "center",
                            width: 32,
                            height: 32,
                            lineHeight: 32,
                            fontSize: 19,
                            fontFamily: 'Source Han Sans CN-Regular',
                        },
                        title: {
                            color: '#fff',
                            align: "right",
                            fontSize: 18,
                            fontFamily: 'Source Han Sans CN-Regular',
                            padding: [0, 0, 0, 6],
                        },
                    },
                },
            },
        ],
        series: [
            {
                // name: "人数",
                type: "bar",
                id: "bar",
                barWidth: 13, // 柱子宽度
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(57, 126, 240, 0)',
                    borderColor: 'rgba(57, 126, 240, 0.04)',
                    borderWidth: 20
                },
                label: {
                    show: true,
                    formatter: '{c}',
                    color: "#fff",
                    fontFamily: "HarmonyOS Sans-Medium",
                    fontSize: 14,
                    position: 'right'
                },
                itemStyle: {
                    barBorderRadius: [0, 3, 3, 0], // 圆角（左上、右上、右下、左下）
                    color: {
                        x: 0,
                        y: 1,
                        x2: 1,
                        y2: 0,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(57, 126, 240, 1)' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(51, 207, 201, 1)' // 100% 处的颜色
                        }],
                    },
                },
                data: currentValueList,
            },
        ],
    };



    nextTick(() => {

        refEchartsComponent.value.initCharts()

        let myChart = refEchartsComponent.value.initCharts()
        // // 循环更新数据
        setInterval(() => {

            getCurrentData();
            myChart.setOption({
                yAxis: [{
                    id: "yAxis1",
                    data: currentNameList,
                }],
                series: [{
                    id: 'bar',
                    data: currentValueList,
                }],
            });

        }, 5000)
    })

}


onMounted(() => {


    httpBigScreenTop10()
        .then(response => {
            const data = response.data || []
            let nameList = []
            let valueList = []
            data.forEach(el => {
                nameList.push(el.drugName.slice(0, 6))
                valueList.push(el.total)
            })

            _initEcharts(nameList, valueList)


        })


})

</script>

<template>
    <div class="chart-row">
        <EchartsComponent ref="refEchartsComponent" :option="option" />
    </div>
</template>

<style scoped>
.chart-row {
    position: absolute;
    width: 96%;
    height: calc(100% - 5vh);
    left: 2%;
    box-sizing: border-box;
}
</style>